<template>
    <el-dialog
            v-model="dialogVisible"
            :before-close="handleClose"
            title="设置开发数量"
            width="400px"
    >

        <el-form
                ref="refForm"
                :model="formData"
                class="demo-ruleForm"
                label-width="110px"
                :rules="rule"
        >
            <el-form-item prop="num" label="开发终端数量" style="width: 100%">
                <div style="display: flex;align-items: center">
                    <el-input v-model="formData.num" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入开发数量"
                              style="width: 100%"/>
                    <span style="margin-left: 10px">家</span>
                </div>

            </el-form-item>

        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="dialogConfirm">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
    import { defineComponent, reactive, toRefs } from 'vue'
    export default defineComponent({
        name: "sellNumDialog",
        emits:['success'],
        setup(props,{emit}) {
            const rule = {
                num: [
                    {required: true, message: '请输入开发数量', trigger: 'change'}
                ],
            }
            var data = reactive({
                dialogVisible:false,
                formData:{
                    num:''
                },
                refForm:null,
            })

            const handleClose = () => {
                data.formData.num = ''
                data.refForm.clearValidate()
                data.dialogVisible = false
            }

            const dialogConfirm = () => {
                data.refForm.validate((value) => {
                    if (value) {

                        emit('success',data.formData.num)
                        handleClose()
                    }
                })
            }

            const openDialog = () => {
                data.dialogVisible = true
            }

            return{
                ...toRefs(data),
                rule,

                handleClose,
                dialogConfirm,
                openDialog,
            }
        }
    })
</script>

<style scoped>

</style>
